<template>
  <div class="nocall">
    <div class="center-box">
      <img class="title-img">
      <h1 class="title">{{title}}</h1>
      <p class="text time">您已等待{{this.waitTime}}</p>
      <p class="text none" v-if="none">暂无司机应答为您服务</p>
      <div class="button-box clearfix">
        <button class="botton left" @click="wait">继续等待</button>
        <button class="botton right" @click="cancelOrder">取消订单</button>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

// 引入这个页面需要的方法
import {mapGetters, mapMutations} from 'vuex'
import {cancelOrder} from 'api/api'
import axios from 'axios'
export default {
  data () {
    return {
      title: '无应答',
      time: 0,
      none: true
    }
  },
  // watch: {
  //   'localStorage.time':function(val){
  //     this.time = val
  //   }
  // },
  // created() {
  //   this.time = this.waitTime
  // },
  computed: {
    timeup () {
      this.time++
      console.log(this.time+' time')
    },
    ...mapGetters([
      'carStartTime',
      'nowtimes',
      'waitTime'
    ])
  },
  methods: {
    // 取消没有应答弹出的页面
    wait () {
      this.setShowNoCall(false)
    },
    // 去掉订单
    cancelOrder () {
      const _this = this
      let order = localStorage.getItem('orderNum')
      axios.post(cancelOrder, {
        'param': {
          'fields': {
            'orderNum': order,
            'nullRates': '1.2'
          }
        }
      }).then((res) => {
        console.log(res)
        let msg = ''
        if(res.data.code == 200) {
          localStorage.setItem('orderNum', '')
          localStorage.setItem('orderStatus', '0')
          this.$createToast({ time:700, type: 'warn', txt: res.data.message }).show()
          setTimeout(function () {
            _this.setShowTips(false)
            _this.setShowCarpool(false)
            _this.setShowInType(false)
            _this.setShowCancel(false)
            _this.setShowNoCall(false)
            _this.setShowType(true)
            _this.setShowFlightInfo(msg)
            _this.setShowTimeInfo(msg)
            _this.setShowSearchBox(msg)
            _this.setDestination(msg)
          }, 700)
        }else if (res.data.code == 10086) {
            this.$router.push({path:"/index?"})
            window.location.reload()
        }
      })
    },
    ...mapMutations({
      setShowNoCall: 'SET_SHOWNOCALL',
      setShowCarpool: 'SET_SHOWCARPOOL',
      setShowType: 'SET_SHOWTYPE',
      setFlightInfo: 'SET_FLIGHTINFO',
      setTimeInfo: 'SET_TIMEINFO',
      setSearchBoxInfo: 'SET_SEARCHBOXINFO',
      setShowInType: 'SET_SHOWINTYPE',
      setShowTips: 'SET_SHOWTIPS',
      setShowCancel: 'SET_SHOWCANCEL',
      setShowFlightInfo: 'SET_SHOWFLIGHTINFO',
      setShowTimeInfo: 'SET_SHOWTIMEINFO',
      setShowSearchBox: 'SET_SHOWSEARCHBOX',
      setDestination: 'SET_DESTINATION',
      setCarStartTime: 'SET_CARSTARTTIME',
      setNowtimes: 'SET_NOWTIMES'
    })
  }
}
</script>

<style  scoped lang="stylus" rel="stylesheet/stylus">
.nocall
  position: fixed
  top: 0
  bottom: 0
  left: 0
  right: 0
  width: 100%
  height: 100%
  background-color: rgba(153, 153, 153, .5)
  .center-box
    position: absolute
    top: 50%
    left: 50%
    margin-top: -167px
    margin-left: -140px
    width: 280px
    height: 335px
    background-color: rgb(255, 255, 255)
    .title-img
      width: 75px
      height: 75px
      border-radius: 50%
      margin-top: 50px
      border: 1px solid red
    .title
      margin-top: 20px
      font-size: 30px
      color: rgb(51, 51, 51)
    .text
      font-size: 13px
      color: rgb(153, 153, 153)
      line-height: 15px
    .time
      margin-top: 35px
  .button-box
    position: absolute
    left: 50%
    margin-left: -125px
    bottom: 29px
    width: 250px
    height: 36px
    .botton
      width: 114px
      height: 36px
      border: none 
      border-radius: 5px
      outline: none
      box-sizing: border-box
    .left
      float: left
      background-color: rgb(51, 51, 51)
      color: rgb(255, 255, 255)
    .right
      float: right
      background-color: rgb(255, 255, 255)
      border: 1px solid #333
      color: rgb(51, 51, 51)
</style>